<template>
	<el-dialog v-model="visible" width="50%" :before-close="handleClose">
		<template #header>
			<span style="font-size: 16px" v-html="title"></span>
		</template>
		<el-form :model="form" label-width="120px">
			<el-form-item label="积分值">
				<el-input-number style="width: 200px" v-model="form.point" :min="50" :max="200" />
			</el-form-item>
			<el-form-item>
				<el-text style="font-size: 16px" type="warning">积分值范围：50 ~ 200</el-text>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button type="primary" @click="handleConfirm">确认</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { addDirectPoint } from '/@/api/blood/bloodxCustomerSpecial';
import { useMessage } from '/@/hooks/message';
const visible = ref(false);
const currentRow = ref();
const form = ref({
	point: 0,
});

const emits = defineEmits(['add-success']);

const title = computed(() => {
	return `将为 <span style="color: #2e5cf6; font-size: 18px; font-weight: bold">${currentRow.value.name}</span> 增加定向积分`;
});

function openDialog(data) {
	currentRow.value = data;
	visible.value = true;
}

function reset() {
	visible.value = false;
	form.value = {
		point: 50,
	};
}

function handleClose(done) {
	reset();
	done();
}

function handleConfirm() {
	addDirectPoint({
		customerId: currentRow.value.id,
		num: form.value.point,
	}).then(() => {
		useMessage().success('增加积分成功');
		emits('add-success');
		reset();
	});
}

defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss"></style>
